<template>
  <video-player
      :src="videoSrc"
      :controls="true"
      :autoplay="true"
      :loop="true"
      :volume="0.6"
      :height="320"
  />
  <div>
    <h3>{{title}}</h3>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { VideoPlayer } from '@videojs-player/vue'
import 'video.js/dist/video-js.css'

export default {
  props: {
    videoSrc: {
      type: String
    },
    title: {
      type: String
    }
  },
  components: {
    VideoPlayer
  },
  setup(props){
    console.log(props)
    return {
      props
    }
  }
}
</script>
<style scoped>
.video-player {
  background-color: black;
  width: 100%;
}
</style>
